<template>
  <div class="box">
    <el-card shadow="hover">
      <div class="info">
        <img
          class="avatar"
          src="@/assets/img/admin.png"
          width="100"
          draggable="false"
        />
        <p class="user_name">
          晴天流云
          <i class="el-icon-edit" title="修改密码" @click="changePwd"></i>
        </p>
        <!-- 个人信息 -->
        <div class="line">
          <i class="el-icon-postcard"></i>
          <span>前端开发工程师</span>
        </div>
        <div class="line">
          <i class="el-icon-map-location"></i>
          <span>武汉市</span>
        </div>
      </div>
    </el-card>
  </div>
  <el-dialog title="修改密码" v-model="dialogFormVisible" :width="500">
    <el-form :model="form" :rules="rules" ref="userFormRef" label-width="96px">
      <el-form-item label="密码" prop="pwd">
        <el-input show-password v-model.trim="form.pwd" clearable></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPwd">
        <el-input
          show-password
          v-model.trim="form.confirmPwd"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleClick('reset')">重置</el-button>
        <el-button type="primary" @click="handleClick('save')">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getCurrentInstance, reactive, ref, toRefs } from "vue";

export default {
  setup() {
    const state = reactive({
      dialogFormVisible: false,
      form: { pwd: "", confirmPwd: "" },
    });

    const userFormRef = ref();

    const { proxy } = getCurrentInstance();

    const rules = {
      pwd: [{ required: true, message: "密码不能为空", trigger: "blur" }],
      confirmPwd: [
        { required: true, message: "确认密码错误", trigger: "blur" },
      ],
    };
    const handleClick = (type) => {
      if (type === "reset") {
        userFormRef.value.resetFields();
        return;
      }
      userFormRef.value.validate((valid) => {
        if (!valid) {
          return false;
        }

        const { pwd, confirmPwd } = state.form;
        proxy.$axios
          .put("/account/changePwd", { pwd, confirmPwd })
          .then((response) => {
            const { success, msg } = response.data;
            if (success) {
              proxy.$message.success("修改成功");
              state.dialogFormVisible = false;
            } else {
              proxy.$message.error(msg);
            }
          })
          .catch((err) => {
            proxy.$message.error(err);
          });
      });
    };

    const changePwd = () => {
      state.dialogFormVisible = true;
    };

    return { userFormRef, ...toRefs(state), rules, handleClick, changePwd };
  },
};
</script>

<style lang="less" scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;

  .info {
    width: 300px;
    text-align: center;

    .user_name {
      padding: 16px 0;
      font-size: 20px;
      line-height: 2;
      text-align: center;
    }

    .line {
      text-align: left;
      color: #555;
      line-height: 32px;
      i {
        margin-right: 8px;
        font-size: 18px;
      }
    }
  }
}
</style>
